import React, { useEffect, useRef, useState } from 'react';
import PageTitle from '@/components/PageTitle';
import { Button, Input, Typography } from 'antd';
import Tables from '@/hoc/Tables';
import styles from './index.less';
import { connect, history } from 'umi';
import { ConnectState } from '@/models/connect';
import { WORKS_LIST } from '@/services/list';
import PageInfoSearch from '@/components/PageInfoSearch';
import { getdownLoadUrl } from '@/services/file';
import { deleteWorksInfo } from '@/services/addworks';

const { Text } = Typography;

const Delivery = (props: { userData: any; dispatch: any }) => {
  const childRef = useRef();
  let workType: string[] = ['已上传', '已投稿', '已入围'];
  let columns: any[] = [
    {
      title: '词条序号',
      dataIndex: 'entryId',
      key: 'key',
      render: (_: any, text: any) => <span>{text?.worksInfo?.entryId}</span>,
      width: 120,
    },
    {
      title: '印面',
      dataIndex: 'printingAnnotations',
      key: 'printingAnnotations',
      width: 100,
      render: (_: any, text: any) => {
        let id: string = text?.worksPicture?.find(el => el.pictureKey == 'printing')?.pictureId;
        return id ? <img src={getdownLoadUrl(id)} alt="图片错误" style={{ width: 80, height: 80 }} /> : null;
      },
    },
    {
      title: '印面释文',
      dataIndex: 'printingAnnotations',
      key: 'printingAnnotations',
      render: (_: any, text: any) => <span>{text?.worksInfo?.printingAnnotations}</span>,
    },
    {
      title: '作者',
      dataIndex: 'authorsName',
      key: 'authorsName',
      render: (_: any, text: any) => <span>{text?.worksInfo?.authorsName ?? '--'}</span>,
    },
    {
      title: '初稿',
      dataIndex: 'workStatus',
      key: 'workStatus',
      render: (_: any, text: any) => <span>{workType[text?.worksInfo?.workStatus] ?? '--'}</span>,
    },
    {
      title: '评审',
      dataIndex: 'reviewsNumber ',
      key: 'reviewsNumber ',
      width: 150,
      render: (_: any, text: any) => {
        let arrs = text?.reviewUserList?.length ? text?.reviewUserList : [];
        let arr = arrs?.map((el: any) => el.userName)?.join(',') ?? '--';
        return <span>{arr}</span>;
      },
    },
    {
      title: '操作',
      width: 250,
      render: (_: any, item: any) => (
        <div className="operation">
          <Text onClick={() => onEdit(item)}>查看</Text>
          <Text onClick={() => onDetil(item)}>上传</Text>
        </div>
      ),
    },
  ];
  const [courierNumber, setCourierNumber] = useState<string>('');
  let { userData, dispatch } = props;

  /**
   * 查看
   */
  const onEdit = (item: any) => {
    history.push(`/draft/check/a/add?id=${item?.worksInfo?.id}&disableds=true&ids=${item?.worksInfo?.id}`);
  };

  /**
   * 评审
   */
  const onDetil = (item: any) => {
    history.push(`/draft/check/a/add?ids=${item?.worksInfo?.id}`);
  };

  useEffect(() => {
    dispatch({
      type: 'addworks/fetch',
    });
  }, []);

  return (
    <div className={styles.regimePage}>
      <PageTitle title={'待处理作品'} />
      <PageInfoSearch>
        <Input style={{ width: 280 }} onChange={e => setCourierNumber(e.target.value)} placeholder="请输入作品关键词" allowClear />
        <Button
          onClick={() => {
            childRef.current.setQuery({});
          }}
          style={{ marginLeft: 20 }}
          className="btn_cold">
          查询
        </Button>
      </PageInfoSearch>
      <div className="regime_table">
        <Tables option={{ keyWord: courierNumber, workType: 0, workStatus: 1 }} childRef={childRef} url={WORKS_LIST} columns={columns} />
      </div>
    </div>
  );
};

interface workState extends ConnectState {
  addworks: any;
}

export default connect(({ login, addworks }: workState) => ({ userData: login.userData }))(Delivery);
